<template>
    
    <div class="recharge_content1">
        <div class="close"  @click="closeBox"></div>
        <div >
            <div class="recharge-content-title">{{$t('Payment_amount')}}</div>
            <p class="price">${{ price }}</p>
        </div>

        <div  class="recharge-content-title">{{$t('recharge_type')}}</div>
		
        <div class="saveChoose-btn">
            <span >{{$t('choice')}}：</span>
            <div class="select-wrapper">
				<el-select v-model="selectedCountry" placeholder="Select" size="default" style="width: 110px" @change="handleChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
                <div class="arrow"></div>
            </div>
            <div class="saveChoose-middle">
                <ul class="data_pay_method">

                    <li data-href="card" :class="{'active':active_item == index}" v-for="item,index in pay_list" @click="setPayInfo(item.type,index)">
                        <img class="save-logo" :src="item.img_url" alt="">
                        <div class="middle-text ">
                            <div class="name">{{item.pay_name}}</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="saveConfirm">
                <button @click="goClientPay_platform(sku_id)">{{$t('confirm')}}</button>
            </div>
        </div>
		
		<!-- <div class="pay_result" v-show="showPayResultStore.isPayResult">
			<div class="close" @click="close_pay_result"></div>
			<iframe :src="pay_result_src" width="100%" height="100%" frameborder="0" ></iframe>
		</div> -->

    </div>
	
</template>

<script setup>
	import { ref, toRefs } from 'vue'
	import axios from '@/utils/api'
	import { useUserInfoStore } from '@/store/modules/user_info/index';
	import {useShowPayResult} from "@/store/modules/isShowPayResult"
	
	
	const props = defineProps(['price','closeBox','sku_id','openDialog','isSandPay','setPayResult','videoSku','count','cText','free_type'])
	const closeBox = props.closeBox
	const isSandPay = props.isSandPay
	const setPayResult = props.setPayResult
	const videoSku = props.videoSku //剧本id
	const count = props.count //购买集数
	const cText = props.cText //集数
	const free_type = props.free_type //收费类型
	const showPayResultStore = useShowPayResult()
	const user_infoStore = useUserInfoStore();
	const userid = user_infoStore.userInfo.id
    let select_item = ref(0)
    let selectedCountry = ref('港澳台');
	const pay_result_src = ref('')
	let pay_url = ref('')
	let active_item = ref(0)
	const resetUrl = () => {
		if(window.baseUrl == "http://192.168.110.244:8081/game/public"){ //判断是否本地或测试服
			pay_url.value = "http://192.168.110.244:8081/game/public/index.php/pay/"
		}else{
			pay_url.value = window.baseUrl+"/index.php/pay/"
		}
	}
	
	 //合并全球支付方式pay_list并去重
	const mergeAndRemoveDuplicates = (...lists) => {
		const combined = lists.flat();
		const seen = new Set();
		return combined.filter(item => {
			const duplicate = seen.has(item.type);
			seen.add(item.type);
			return !duplicate;
		});
	};
	
	const chargeList = ref([])
	let sku = ref('')
	let currency = ref('')
    const getChargeList = async () =>{
        const list = await axios.get('/platformRecharge')
        chargeList.value = list.data
		console.log(chargeList.value);
        select_price(chargeList.value[0].id,chargeList.value[0].currency,0)
    }
	getChargeList()
	
	let payment = ref('')
	const setPayInfo = (type,index)=>{
		active_item.value = index || 0
		resetUrl()
		payment.value = type
		console.log(payment.value);
		if(payment.value == 'platform'){//判断是否是视频购买
            pay_url.value += "ugamepay/index?user_id="+userid+"&sku="+videoSku+"&payment="+type+"&type=2&currency=USD&order_type=4&episode_num="+count
			if(free_type == 2){
				pay_url.value += "&cText="+cText
			}
		}
		
		
	}
	
	const handleChange = (event) => {
		// selectedCountry.value = event.target.value;
		console.log(selectedCountry.value);
		if(localStorage.getItem('lang') == 'en'){
			switch (selectedCountry.value) {
				case 'Hong Kong,Macau,Taiwan':
					pay_list.value = pay_list_HMT;
					setPayInfo('payuni');
					break;
				case 'Malaysia':
					pay_list.value = pay_list_Malaysia;
					// setPayInfo('paypal');
					isSandPay ? setPayInfo('platform') : setPayInfo('card');
					break;
				case 'Singapore':
					pay_list.value = pay_list_Singapore;
					// setPayInfo('card');
					isSandPay ? setPayInfo('platform') : setPayInfo('card');
					break;
				default:
					selectedCountry.value = 'Global';
					pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
					setPayInfo('card');
					break;
			}
		}else{
			switch (selectedCountry.value) {
				case '港澳台':
					selectedCountry.value = '港澳台';
					pay_list.value = pay_list_HMT
					setPayInfo('payuni')
					break;
				case '港澳台':
					selectedCountry.value = '港澳台';
					pay_list.value = pay_list_HMT
					setPayInfo('payuni')
					break;
				case '港澳台':
					selectedCountry.value = '港澳台';
					pay_list.value = pay_list_HMT
					setPayInfo('payuni')
					break;
				case '馬來西亞':
					selectedCountry.value = '馬來西亞';
					pay_list.value = pay_list_Malaysia
					// setPayInfo('paypal')
					isSandPay ? setPayInfo('platform') : setPayInfo('paypal');
					break;
				case '新加坡':
					selectedCountry.value = '新加坡';
					pay_list.value = pay_list_Singapore
					// setPayInfo('card')
					isSandPay ? setPayInfo('platform') : setPayInfo('card');
					break;
				default:
					selectedCountry.value = '全球';
					pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
					setPayInfo('payuni')
					break;
			}
		}
		
	};
		
    let pay_list = ref([]);
    let pay_list_HMT = []
    let pay_list_Singapore = []
    let pay_list_Malaysia = []
	let platform_list = []
    if(localStorage.getItem('lang') == 'en'){
    	pay_list_HMT = [
			{
				pay_name:'payuni',
				img_url:'https://www.yyfuns.com/static/pay_icon/payuni.png',
				type:'payuni'
			},
			{
    			pay_name:'Linepay',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
    			type:'linepay'
    		},
    		{
    			pay_name:'MyCard',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
    			type:'mycard'
    		},
			{
    			pay_name:'Credit Card',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
    			type:'card'
    		},
			{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'jkopay',
    			img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
    			type:'jkopay'
    		},
    		
    		{
    			pay_name:'Payme',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
    			type:'payme'
    		},
    		// {
    		// 	pay_name:'八達通',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
    		// 	type:'F7'
    		// },
    		// {
    		// 	pay_name:'weChat',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
    		// 	type:'wetchat'
    		// },
    		{
    			pay_name:'Alipay Hong Kong',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
    			type:'alipay_hk'
    		},
    	]
    	
    	pay_list_Singapore = [
    		{
    			pay_name:'Credit Card',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
    			type:'card'
    		},
    		{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'Paynow',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
    			type:'paynow'
    		},
    		// {
    		// 	pay_name:'Grabpay',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
    		// 	type:'GRABPAY'
    		// },
    	]
    	
    	pay_list_Malaysia = [
    		{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'Touch’n Go',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
    			type:'tng'
    		},
    		{
    			pay_name:'FPX Net Banking',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
    			type:'fpx'
    		},
    		// {
    		// 	pay_name:'Grabpay',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
    		// 	type:'GRABPAY'
    		// },
    	]
		if(isSandPay){ //购买视频才能平台币付款
			platform_list = [
				{
					pay_name:'Y Coin',
					img_url:'https://www.yyfuns.com/static/logoZY_en.png',
					type:'platform'
				}
			]
		}
		
    }else{
    	pay_list_HMT = [
			{
				pay_name:'payuni',
				img_url:'https://www.yyfuns.com/static/pay_icon/payuni.png',
				type:'payuni'
			},
    		{
    			pay_name:'Linepay',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
    			type:'linepay'
    		},
    		{
    			pay_name:'MyCard',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
    			type:'mycard'
    		},
    		{
    			pay_name:'信用卡',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
    			type:'card'
    		},
    		{
    			pay_name:'街口支付',
    			img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
    			type:'jkopay'
    		},
    		{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'Payme',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
    			type:'payme'
    		},
    		// {
    		// 	pay_name:'八達通',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
    		// 	type:'F7'
    		// },
    		// {
    		// 	pay_name:'weChat',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
    		// 	type:'wetchat'
    		// },
    		{
    			pay_name:'香港支付寶',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
    			type:'alipay_hk'
    		},
    	]
    	
    	pay_list_Singapore = [
    		{
    			pay_name:'信用卡',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
    			type:'card'
    		},
    		{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'Paynow',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
    			type:'paynow'
    		},
    		// {
    		// 	pay_name:'Grabpay',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
    		// 	type:'GRABPAY'
    		// },
    	]
    	
    	pay_list_Malaysia = [
    		{
    			pay_name:'Paypal',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
    			type:'paypal'
    		},
    		{
    			pay_name:'Touch’n Go',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
    			type:'tng'
    		},
    		{
    			pay_name:'FPX Net Banking',
    			img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
    			type:'fpx'
    		},
    		// {
    		// 	pay_name:'Grabpay',
    		// 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
    		// 	type:'GRABPAY'
    		// },
    	]
		if(isSandPay){
			platform_list = [
				{
					pay_name:'Y幣',
					img_url:'https://www.yyfuns.com/static/logoZY.png',
					type:'platform'
				}
			]
		}
    }


	//首次进入判断用户地区
	if(localStorage.getItem('lang') == 'en'){
		switch (navigator.language) {
			case 'zh-TW':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-HK':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-MO':
				selectedCountry.value = 'Hong Kong,Macau,Taiwan';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'ms-MY':
				selectedCountry.value = 'Malaysia';
				pay_list.value = pay_list_Malaysia
				// setPayInfo('paypal')
				isSandPay ? setPayInfo('platform') : setPayInfo('paypal');
				break;
			case 'en-SG':
				selectedCountry.value = 'Singapore';
				pay_list.value = pay_list_Singapore
				setPayInfo('card')
				isSandPay ? setPayInfo('platform') : setPayInfo('card');
				break;
			default:
				selectedCountry.value = 'Global';
				pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
				if(isSandPay){
                    pay_list.value.splice(2, 0,
                        {
                            pay_name:'Y Coin',
                            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                            type:'platform'
                        }
                    )
                }
				setPayInfo('card')
				break;
		}
	}else{
		switch (navigator.language) {
			case 'zh-TW':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-HK':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'zh-MO':
				selectedCountry.value = '港澳台';
				pay_list.value = pay_list_HMT
				setPayInfo('payuni')
				break;
			case 'ms-MY':
				selectedCountry.value = '馬來西亞';
				pay_list.value = pay_list_Malaysia
				setPayInfo('paypal')
				break;
			case 'en-SG':
				selectedCountry.value = '新加坡';
				pay_list.value = pay_list_Singapore
				setPayInfo('card')
				break;
			default:
				selectedCountry.value = '全球';
				pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
				if(isSandPay){
                    pay_list.value.splice(2, 0,
						{
                            pay_name:'Y幣',
                            img_url:'https://www.yyfuns.com/static/logoZY.png',
                            type:'platform'
                        }
                    )
                }
				setPayInfo('payuni')
				break;
		}
	}

   

	const goClientPay_platform = (sku_id)=>{
		if(payment.value == 'platform'){
			console.log(pay_url.value);
			setPayResult(pay_url.value)
		}else{
			// showPayResultStore.showPayResult()
			if(isSandPay){ //判断是否是视频购买
				pay_url.value += "ugamepay/index?user_id="+userid+"&sku="+videoSku+"&payment="+payment.value+"&type=2&currency=USD&order_type=4&episode_num="+count
				if(free_type == 2){
					pay_url.value += "&cText="+cText
				}
			}else{
				pay_url.value += "ugamepay/index?user_id="+userid+"&payment="+payment.value+"&type=2&order_type=3&sku="+sku_id+"&currency="+currency.value
			}
			// pay_result_src.value = pay_url.value
			console.log(pay_url.value);
			closeBox()
			props.openDialog() //打开完成支付确认框
			window.open(pay_url.value)
		}
		
	}
	
	 const select_price = (id,currency1,index) =>{
		// console.log(id,currency,index);
		select_item.value = index
		sku.value = id
		currency.value = currency1
	}
	
	window.addEventListener('message', function(event) {
		if(event.data == 'unShow'){
			close_pay_result()
		}
	});
	
	const close_pay_result = ()=>{
		// showPayResultStore.unPayResult()
		// pay_result_src.value = ''
		window.location.reload()
	}
	
	let options = []
	const lang = ref('')
	if(localStorage.getItem('lang') == 'en'){
		lang.value = 'en'
		options = [
		  {
		    value: 'Hong Kong,Macau,Taiwan',
		    label: 'Hong Kong,Macau,Taiwan',
		  },
		  {
		    value: 'Malaysia',
		    label: 'Malaysia',
		  },
		  {
		    value: 'Singapore',
		    label: 'Singapore',
		  },
		  {
		    value: 'Global',
		    label: 'Global',
		  },
		];
	}else{
		lang.value = 'zh'
		options = [
			{
				value: '港澳台',
				label: '港澳台',
			},
			{
				value: '馬來西亞',
				label: '馬來西亞',
			},
			{
				value: '新加坡',
				label: '新加坡',
			},
			{
				value: '全球',
				label: '全球',
			},
		]
	}

	if(isSandPay && localStorage.getItem('lang') == 'zh'){
        pay_list_HMT.splice(2, 0,
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
        pay_list_Singapore.unshift( 
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
        pay_list_Malaysia.unshift( 
            {
                pay_name:'Y幣',
                img_url:'https://www.yyfuns.com/static/logoZY.png',
                type:'platform'
            }
        )
    }
	if(isSandPay && localStorage.getItem('lang') == 'en'){
        pay_list_HMT.splice(2, 0,
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
        pay_list_Singapore.unshift( 
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
        pay_list_Malaysia.unshift( 
            {
                pay_name:'Y Coin',
                img_url:'https://www.yyfuns.com/static/logoZY_en.png',
                type:'platform'
            }
        )
    }
</script>


<style lang="less" scoped>

.recharge_content1 {
    
    padding: 15px 12px 90px;
    .price{
        font-size: 50px;
        font-weight: bold;
        text-align: center;
    }
    .close {
        z-index: 9;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
        background-image: url();
    }
    .close:hover {
        cursor: pointer;
        background-image: url();
    }
    .recharge-content-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 13px;
        color: #4e4e4e;
        margin-top: 10px;

        span {
            font-size: 12px;
            color: #99a2aa;
        }
    }

    .pay-rechange-panel-box {
        display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 10px;
        margin-top: 20px;
        .pay-rechange-item {
            margin-left: 0;
            margin-right: 0;
            color: #222;
            box-sizing: border-box;
            border: 1px solid #e7ecf1;
            border-radius: 4px;
            height: 115px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            margin-bottom: 16px;
            cursor: pointer;
            padding: 12px 0;
            // width: 100px;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;

            .pay-rechange-item-num {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: end;
                align-items: flex-end;

                .pay-rechange-item-num-title-1 {
                    font-size: 25px;
                }

                
            }
			.pay-rechange-item-num-title-2,.pay-rechange-item-num-title-3 {
				font-size: 13px;
			}
            .pay-rechange-item-bottom {
                margin-top: 12px;
                font-size: 14px;
                color: #757575;
            }
        }

        .pay-rechange-item-selected {
            border: 1px solid #02a7e3;
            color: #02a7e3;
            cursor: default;

            .pay-rechange-item-bottom {
                color: #02a7e3;
            }
        }
    }

    .saveChoose-btn {
        .select-wrapper {
            position: relative;
            display: inline-block;
        }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: #f1f1f1;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            color: #333;
            width: 120px;
        }

        .select-wrapper select:focus {
            outline: none;
        }

        .select-wrapper select option {
            background-color: white;
            color: #333;
        }

        .select-wrapper select::-ms-expand {
            display: none;
        }

        .arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        // .arrow::before {
        //     content: "";
        //     border-style: solid;
        //     border-width: 5px 5px 0 5px;
        //     border-color: #333 transparent transparent transparent;
        //     display: inline-block;
        //     vertical-align: middle;
        //     transform: translateY(-50%);
        // }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: transparent;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            font-size: 16px;
            color: #333;
        }

        .select-wrapper select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }

        .select-wrapper select option {
            background-color: #fff;
            color: #333;
        }
        .saveChoose-middle{
            margin-top: 20px;
            .data_pay_method{
                display: grid;
                grid-template-columns: repeat(4, 1fr); /* 每行5个项目，1fr表示平均分配剩余空间 */
                gap: 10px; /* 项目之间的间隔 */
                li{
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    cursor: pointer;
                    padding: 10px;
                    border: 1px solid transparent;
                    border-radius: 12px;
					width: 84px;
                    img{
                        width: 50px;
                        height: 50px;
                    }
                    .add {
                        opacity: 1  ;
                        color: #fff;
						background-color: red;
						border-radius: 30px;
						width: 35px;
						text-align: center;
						margin-top: 2px;
						font-size: 12px;
						padding: 2px 0px;
						position: relative;
						top: -8px;
                    }
                    .name{
                        // margin-top: 10px;
                    }
                }
                li:hover{
                    border: 1px solid #02a7e3;
                    
                }
                li.active{
                    background-color: #02a7e3;
					color: white;
                    box-shadow: 0 2px 4px rgb(0 0 0 / 37%);
                }
				.save-logo{
					border-radius: 50%;
				}
				.middle-text{
					margin-top: 10px;
					text-align: center;
				}
            }
        }
        .saveConfirm {
            padding: 24px 0;
            button{
                background-color: #02a7e3;
                color: #fff;
                height: 44px;
                border: none;
                width: 100%;
                border-radius: 14px;
                cursor: pointer;
            }
            button:hover{
                background-color: rgba(#02a7e3, 0.7);
            }
        }
    }
}

.pay_result{
	background-color: #fff;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	height: 100vh;
	iframe{
		position: relative;
		z-index: 99;
	}
	.close {
		z-index: 999;
		position: absolute;
		right: 10px;
		top: 10px;
		width: 40px;
		height: 40px;
		background-image: url();
	}
}
</style>